<template>
	<view class="goods-list">
		<view class="goods-item" v-for="(item, i) in goodsList" :key="i">
			<!-- 商品左侧图片区域 -->
			<view class="goods-item-left">
				<image class="goods-image" :src="item.goods_small_logo || defaultPic"></image>
			</view>
			<!-- 商品右侧信息区域 -->
			<view class="goods-item-right">
				<!-- 商品标题 -->
				<view class="goods-name">{{item.goods_name}}</view>
				<!-- 商品价格 -->
				<view class="goods-price">{{item.goods_price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj: { //请求参数对象
					query: '', //查询关键词
					cid: '', //商品分类id
					pagenum: 1, //页码值
					pagesize: 10 //每页多少条数据
				},
				goodsList: [], //商品列表数据
				total: 0, //列表总数量
				// 默认的空图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
			}
		},
		onLoad(options) {
			//将页面参数保存到本地数据对象
			this.queryObj.query = options.query || '',
			this.queryObj.cid = options.cid || '',
			//请求列表数据
			this.getGoodsList()
		},
		methods: {
			//请求数据列表
			async getGoodsList() {
				const {
					data: res
				} = await uni.$http.get('/goods/search', this.queryObj)
				if (res.meta.status !== 200) return uni.$showMsg()
				// 为数据赋值
				this.goodsList = res.message.goods
				this.total = res.message.total
			}
		}
	}
</script>

<style lang="scss">
.goods-list {
  border: 1rpx solid #efefef;
  margin: 0 8rpx;
  .goods-item {
    display: flex;
    border-bottom: 1px solid #efefef;
    padding: 8rpx;
    .goods-item-left {
      .goods-image {
        width: 200rpx;
        height: 200rpx;
        vertical-align: middle;
      }
    }
    .goods-item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-name {
        font-size: 24rpx;
      }
      .goods-price{
        font-size: 32rpx;
        color: #c00000;
      }
    }
  }
}
</style>
